<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 4.制作4个嵌套DIV ，要求：
      1.每个父DIV尺寸必须大于子DIV
      2.实现每个DIV在父DIV正中间
      3.每个DIV至少要包含一个非DIV元素，比如：文字，P标签，A标签，图片等
      4.通过最底层DIV，打印每层父DIV，如：
	1级父元素为（），1级父节点为（）
	2级父元素为（），2级父节点为（）
    .... -->
    <div style="width: 500px;height: 500px; border: 1px red solid;" id="a">
        <span>4级父</span>
        <div style="width: 400px;height: 400px; border: 1px blue solid;margin: 40px;padding-left:20px" id="b">
            <p style="margin: 0px;padding: 0%;">我居中了3级父</p>
            <div style="width: 300px;height: 300px; border: 1px seagreen solid;margin: 40px;padding-left:20;" id="c">
                <span>呜呜呜呜呜2级父</span>
                <div style="width: 200px;height: 200px; border: 1px pink solid;margin: 40px;padding-left:15px" id="d">
                    <p style="margin: 0px;padding: 0px;">我居中了4级父</p>
                </div>
            </div>
        </div>
    </div>
</body>
    <script>
        // 父节点有三种类型: 元素节点（element）、文档节点（document）和文档片段节点(documentfragment), 
        // .parentNode 可能返回这三个类型中的一个. 
        // 父元素节点排除了document 和 documentfragment, 只会返回元素节点.
        // 注意, 如果对element和documentfragment使用, 则返回null


        //获取1级父节点元素
        var d1=document.getElementById('d').parentElement;
        console.log(d1);
        //获取1级父节点
        var d11=document.getElementById('d').parentNode;
        console.log(d11);

        console.log('------------------------------------------------------------');

        //获取2级父节点元素
        var d2=document.getElementById('d').parentElement.parentElement;
        console.log(d2);
        //获取2级父节点
        var d22=document.getElementById('d').parentNode.parentNode;
        console.log(d22);

        console.log('------------------------------------------------------------');

        //获取3级父节点元素
        var d3=document.getElementById('d').parentElement.parentElement.parentElement;
        console.log(d3);
        //获取3级父节点
        var d33=document.getElementById('d').parentNode.parentNode.parentNode;
        console.log(d33);
    </script>
</html>